<template>
  <div class="app-container calendar-list-container">
    <p>主题色设置</p>
    <div class="fx" style="justify-content:flex-start">
      <div class="block">
        <span class="demonstration">开始颜色</span>
        <el-color-picker v-model="color1"></el-color-picker>
      </div>
      <div class="block" >
        <span class="demonstration">结束颜色</span>
        <el-color-picker v-model="color2"></el-color-picker>
      </div>
    </div>
    <div class="preview" :style='gradientStyle'></div>
    <el-button type="primary" style="margin-top:40px" :loading="loading.edit" @click="updateParameter(8)" >确定</el-button>
    <p>logo设置</p>
    <div>
      <img :src="parameterPic" v-if="parameterPic" style="width:200px;height:200px" alt="">
    </div>
    <div>
      <el-upload
          action=""
          class="upload-demo"
          :http-request="fileUploads"
          :limit="1"
          list-type="picture">
          <el-button size="small" type="primary" @click="updateParameterss(9)">点击更换</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
    <p>小程序名称</p>
    <div>
      <el-input v-model="parameterTitle" placeholder="请输入小程序名称" style="width:300px"></el-input>
    </div>
    <el-button type="primary" style="margin-top:40px" :loading="loading.edit" @click="updateParameters(10,parameterTitle)" >确定</el-button>
  </div>
  
</template>
<script>
import { VueEditor } from 'vue2-editor'
import { updateSystemParamter,getSystemParamter,fileUpload } from '@/api/system'
export default {
  name: 'system_color',
  data () {
    return {
      loading: {
        edit: false
      },
      color1: '#158c34',
      color2: '#9cdcac',
      parameterPic: '',
      parameterTitle: ''
    }
  },
  components:{
    VueEditor
  },
  methods: {
    // 获取商城地址
    async getParameter(){
      const res = await getSystemParamter({
        systemType:8,
      })
      if(res.code == 1) {
        let parameter = res.data.parameter.split(',')
        if(parameter.length == 2) {
          this.color1 = parameter[0]
          this.color2 = parameter[1]
        }else {
          this.color1 = parameter[0]
        }
      }
    },
    //logo  9
    async getParameters(){
      const res = await getSystemParamter({
        systemType:9,
      })
      if(res.code == 1) {
        this.parameterPic = res.data.parameter
      }
    },
    //修改名称  10
    async getParameterss(){
      const res = await getSystemParamter({
        systemType:10,
      })
      if(res.code == 1) {
        this.parameterTitle = res.data.parameter
      }
    },
    //修改颜色  为8
    async updateParameter(type){
      const { data } = await updateSystemParamter({
        systemType:8,
        parameter:this.colorList
      })
      this.$message.success('修改成功')
      this.getParameter()
    },
     //修改 名称  为10
    async updateParameters(type,parameterTitle){
      const { data } = await updateSystemParamter({
        systemType:10,
        parameter:parameterTitle
      })
      this.$message.success('修改成功')
      this.getParameterss()
    },
    //上传logon  为9
    async fileUploads({file}) {
      try{
        const fd = new FormData()
        fd.append('file', file)
        fd.append('fileName', 'indexPic')
        const res = await fileUpload(fd)
        this.updateParameterss(res.data)
      } catch(error) {

      }
    },
    async updateParameterss(res) {
      const { data } = await updateSystemParamter({
          systemType:9,
          parameter:res
        })
      this.$message.success('修改成功')
      this.getParameters()
    }
  },
  computed: {
    colorList() {
      return this.color1 + "," + this.color2
    },
    gradientStyle () {
      return {
        'background': `linear-gradient(to right, ${this.color1}, ${this.color2})`
      }
      // return `background: linear-gradient(to right, ${this.color1}, ${this.color2})`
    }
  },
  created(){
    this.getParameter();
    this.getParameters()
    this.getParameterss()
  }
}
</script>

<style  lang="scss">
.preview {
  width: 200px;
  height: 200px;
}
  
</style>
